<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #tips{
            height: 45px;
            line-height: 45px;
            border: 1px solid #333;
            font-size: 14px;
            padding: 0 10px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="tips">
        <!-- 距离双12剁手还有xx天xx时xx分xx秒 -->
    </div>
</body>
<script>

    var tips = document.getElementById("tips");

    countDown();

    // 把函数当成参数  传入到另一个函数中,由另一个函数代为执行  =>  回调函数
    // 可以理解为 => 提前规定好了要执行的内容(放在函数中)  
    var timer = setInterval( countDown ,1000);


    function countDown(){
        var future = new Date(2021,9,12,10,28,0);
        console.log(future);

        var now = new Date();
        console.log(now);

        var time = parseInt((future - now)/1000);
        console.log(time);
        if(time>0){  // 未来时间 > 当前时间
            var day = parseInt(time / (60 * 60 * 24));

            // 总的时间 / 一小时 => 小时总的倍数  
            // 小时总的倍数 % 一天(24)  => 不满一天的小时数
            var hour = parseInt(time / (60 * 60)) % 24;   
            var minute = parseInt(time / 60) % 60;
            var second = time % 60;
            console.log(day,hour,minute,second);

            // 距离双12剁手还有xx天xx时xx分xx秒
            tips.innerText = "距离双12剁手还有:"+ day + "天" + hour + "时" + minute + "分" + second + "秒";



            
        }else{ //倒计时结束
            clearInterval(timer);
            tips.innerText = "双11开始";
        }
    }

</script>
</html>